<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="list">
      <div class="list__content">
        <div class="list__content--left">
          <div class="leftTop">
            <div style="width:90px;height:90px;position:relative">
              <img :src="item.coverPoster" style="width:90px;height:90px;" />
              <div
                class="tip"
                style="background-color:#00CC33"
                v-if="item.status === 1"
              >
                进行中
              </div>
              <div
                class="tip"
                style="background-color:#2D8CF0"
                v-if="item.status === 0"
              >
                未开始
              </div>
              <div
                class="tip"
                style="background-color:#C9C9C9"
                v-if="item.status === 2"
              >
                已结束
              </div>
            </div>
            <div class="leftTop__content">
              <div class="leftTop__content--name">{{ item.name }}</div>
              <div class="leftTop__content--tip">
                活动时间：{{ item.startTime }} - {{ item.endTime }}
              </div>
              <div class="leftTop__content--tip">
                活动商品：{{ item.productNumber }}件
              </div>
            </div>
          </div>
          <div class="leftBottom">
            <span
              class="leftBottom__btn"
              v-if="item.status === 2"
              @click="edit(item)"
              >复制活动</span
            >
            <span class="leftBottom__btn" v-else @click="edit(item)"
              >编辑活动</span
            >
            <span
              class="leftBottom__btn"
              v-if="item.status === 1"
              @click="close(item)"
              >关闭活动</span
            >
            <span class="leftBottom__btn" v-else @click="del(item)"
              >删除活动</span
            >
            <span class="leftBottom__btn" @click="copyActivityLink(item)"
              >复制链接</span
            >
          </div>
        </div>
        <div class="list__content--right">
          <div class="listItem">参加人数 {{ item.userNumber }}</div>
          <div class="listItem">支付单数 {{ item.orderNumber }}</div>
          <div class="listItem">应收金额 {{ item.totalAmount.toFixed(2) }}</div>
        </div>
      </div>
    </div>
    <div class="emptyLine" v-if="list.length === 0">
      暂无数据~
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { transFormActivityById } from "@/api/chainActivity/chainActivity";
import store from "@/store";

@Component
export default class ActivityList extends Vue {
  @Prop({
    type: Array,
    default() {
      return [];
    },
  })
  list: any;

  /**
   * 编辑活动
   */
  edit(item) {
    this.$emit("edit", item.id);
  }

  /**
   * 关闭活动
   */
  close(item) {
    this.$emit("close", item.id);
  }

  /**
   * 删除活动
   */
  del(item) {
    this.$emit("del", item.id);
  }

  /**
   * 复制活动链接
   */
  copyActivityLink(item) {
    this.$parent.fullscreenLoading = true;
    const tenantId = store.state.user.userInfo.shopInfoVo.tenantId;
    const shopId = store.state.user.userInfo.shopInfoVo.shopId;
    const url = `https://${window.location.host}/h5/${process.env.VUE_APP_APP_VERSION}?tenanId=${tenantId}&shopId=${shopId}&actId=${item.id}`;
    const param = {
      path: url,
    };
    transFormActivityById(item.id, param)
      .then(res => {
        this.$copyText(res.data);
        this.$message.success("复制成功");
        this.$parent.fullscreenLoading = false;
      })
      .catch(err => {
        console.log("err", err);
      });
  }
}
</script>

<style lang="scss" scoped>
@include b(list) {
  display: flex;
  @include e(content) {
    width: 100%;
    height: 170px;
    padding: 20px;
    background-color: white;
    margin-top: 20px;
    display: flex;

    @include m(left) {
      display: flex;
      flex-wrap: wrap;
      width: 660px;
      position: relative;

      .leftTop {
        display: flex;
        &__content {
          display: flex;
          flex-wrap: wrap;
          margin-left: 20px;
          padding-top: 5px;
          &--name {
            font-weight: bold;
            font-size: 15px;
            width: 380px;
            margin-bottom: 15px;
          }
          &--tip {
            font-size: 14px;
            color: #666666;
            width: 380px;
          }
        }
      }

      .leftBottom {
        display: flex;
        margin-top: 10px;
        &__btn {
          width: 100px;
          height: 34px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #d4d4d4;
          color: #333333;
          font-size: 12px;
          border-radius: 5px;
          margin-right: 20px;
          cursor: pointer;
        }
      }
    }

    @include m(right) {
      width: 150px;
      border-left: 1px solid #e4e4e4;
      padding-left: 20px;
      display: flex;
      align-content: space-between;
      flex-wrap: wrap;
      .listItem {
        width: 180px;
        margin: 5px 0px 5px 0px;
        color: #666666;
      }
    }
  }
}

.tip {
  position: absolute;
  width: 55px;
  height: 20px;
  color: white;
  top: 0px;
  left: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.emptyLine {
  width: 100%;
  height: 80px;
  background-color: white;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-top: 15px;
  font-size: 14px;
  color: #b3b3b3;
  border-bottom: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
}
</style>
